<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染-练习-段子列表</title>
    <style>
        .container-duanzi{
            width: 1000px;
            margin:50px auto;
        }
        table,td{
            border-collapse: collapse;
        }
        td{
            padding: 10px 20px;
        }
    </style>
</head>

<body>
    <div id="root"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        //数据
        let duanzi = [
            {
                "sid": "29743617",
                "text": "有一天北极熊打电话给企鹅，问他为什么每次约他去看电影他都不去？为什么啊？企鹅回答到，我他妈太南了。",
                "name": "曹小俊吖"
            },
            {
                "sid": "29961244",
                "text": "婆婆送了本菜谱给媳妇，意图让媳妇学会做菜。结果媳妇很腼腆跟婆婆说：妈您太客气了，您每天那么累，还让我点菜做给我吃，这不太合适呀！",
                "name": "Pescado"
            },
            {
                "sid": "30684551",
                "text": "老婆：我们来做个互相夸奖对方的游戏，你先来!我：老婆你真漂亮。老婆：你真有眼光!",
                "name": "茉莉花开"
            },
            {
                "sid": "29648368",
                "text": "一个男人走进一家小店，他问老板：“你还认得我吗?”老板摇摇头，男人说：“我早就知道，你早把我忘了，但是我不会忘!十年前，我曾经身无分文，走进你的店，向你讨五块钱，买了车票，搭上长途车，去大城市去打拼!”老板笑笑：“帮助人是应该的!”“那好，你再借我5块。”",
                "name": "关注我的都是大佬"
            },
            {
                "sid": "29735098",
                "text": "单位一妹子，已过三十还孑然一身，大家都叫她‘特仑苏’。不闻世事的我，起初只以为这个绰号是因为她长得白白嫩嫩的缘故。后来听说新来不久的健壮小伙晚上帮她修电脑后，请假在家床上躺了三天，总算悟出了特仑苏背后的由来...",
                "name": "晓斌"
            },
            {
                "sid": "29648084",
                "text": "老师课上提问，问到一男孩，“你长大后要干什么”小男孩说：“我以后要当女浴室的一名搓澡工。”正当老师惊叹之余，男孩接着说：“这样我妈妈就不用那么辛苦了！”",
                "name": "关注我的都是大佬"
            },
            {
                "sid": "29750041",
                "text": "晚上有个小伙子说我们的烧烤看上去和其他地方的差不多，却贵多了。我举了个例子：“吃下去的金针菇和拉出来的金针菇看上去也差不多，味道能一样吗？”小伙子思考了一下后说：“一样。”",
                "name": "关注我的都是大佬"
            },
            {
                "sid": "29723135",
                "text": "我有一个朋友，昨天晚上去吃烧烤，\n\n他拿着瓶啤酒对服务员说：\n\n“你信不信我能徒手起瓶盖？”\n\n服务员摇头说不信。\n\n朋友一拍桌子：“那你还不拿起子去！”",
                "name": "陪我到可可西里去看海"
            },
            {
                "sid": "29743251",
                "text": "唐僧来到贫困山区化缘，悟空保护师傅，沙僧和八戒去远处城里找吃的因为没有钱，都空手而归。悟空大怒：“找不回吃的，就别回来！“第三天傍晚，沙僧高兴地背着一大袋子米，还剩了好多钱。悟空大喜，又问：“八戒呢？”沙僧伤心地哭道：“大师兄，咱们这么多人，就二师兄能卖到１６块钱一斤”",
                "name": "关注我的都是大佬"
            },
            {
                "sid": "29971945",
                "text": "水可以这么喝：茉莉蜜茶喝半瓶加半瓶水，就成了茉莉花茶；再喝再加就成了茉莉清茶；再喝再加，就成了茉莉花茶无糖版；再喝再加，就成了农夫山泉有点甜；再喝再加，纯净水。",
                "name": "等待你一辈子"
            },
            {
                "sid": "29775289",
                "text": "一年级的儿子放学回来后，给他妈妈出了道题：买了十瓶啤酒回家，老爸喝了三瓶，请问家里还剩几瓶？\n这么简单的问题，一下子答出来会伤了孩子学习的积极性，于是老婆掰着手指头假装算了好久才答：七瓶。\n儿子笑了：笨！酒喝了，瓶还在，还是十瓶！",
                "name": "糖果521000"
            },
            {
                "sid": "29982729",
                "text": "留名，还你一张帅炸的壁纸，留名必回！",
                "name": "凉心女神经"
            },
            {
                "sid": "29907157",
                "text": "我的好朋友既是我的同事又是我的室友。昨天下班回家，他突然问我：“你想当领导吗？”\n我点点头：“想啊。”\n他：“你得向赵总学习。”\n我疑惑：“怎么学习？”\n他：“比如说他喜欢吃辣。”\n我：“我也喜欢吃辣啊。”\n他想了想：“总之，他干啥你干啥。”\n我立马脱了衣服把他摁在床上：“今晚你是我的人。”",
                "name": "遛位帝皇玩"
            },
            {
                "sid": "28719412",
                "text": "从小外公外婆妈妈就告诉我 我们家穷 没钱买 你就不要想了 羡慕也没办法你没那好命，你连语数外都学不好还想去跳舞 学那个有什么用，你是姐姐让给弟弟吃，你是晚辈说你是为你好不管我对与错解释就是顶嘴狡辩，受了委屈欺负怎么没发生在别人身上偏偏是你这么巧，您是长辈所做的事都是为我好总不会害我啊 我懂个屁能有什么想法，我们家没钱别人看不起低人一等很正常这个世界就是如此，大庭广众之下刮我耳巴子 告诉我不可以玩🌂没听 后来掉地上弄脏了，不让我带伙伴回家玩也不让我去别人家玩 也不会尊重我的朋友，\n还有很多不知道怎么形容 不想说了 说了也没意义\n考考姐夫综上所述你们觉得我现在是什么样的",
                "name": "小小宝贝"
            },
            {
                "sid": "29974499",
                "text": "玩不得姐五年了   终于到了这一步！！给孩子起名  姓马浩子辈的  姐夫们手下留情哈",
                "name": "俺是看热闹的"
            },
            {
                "sid": "29529511",
                "text": "我结婚时因为家庭原因老爹没出钱，媳妇很不高兴。说，她哥结婚时候，他爹妈借了好多债。我说，闺女是爹的大棉袄。我也不能因为结个婚让我爹穿不上棉裤。我爹有多少是他的。他给我，我就拿。不给也不要。",
                "name": "君自问心"
            },
            {
                "sid": "28797876",
                "text": "玩白思两年第一次发帖，一夜无眠自己老公搞外遇出轨说没有真感情，跟我道歉扇自己脸拿烟头烫自己发誓没有下一次，但是这样的日子我过够了，他30居然跟一个40多岁的女人上了床，我现在看着他就恶心，唯一舍不得的就是孩子，怎么办？远嫁。。。",
                "name": "寂寞是因为思念谁_"
            },
            {
                "sid": "30809705",
                "text": ".第一次去相亲时，老妈为了让我这个女汉子看着淑女点，给我买了小细高跟鞋，真心很不习惯，看到男方还有他妈妈来了，我站起来打招呼，没想到脚下一崴，双膝跪地，疼的我大叫：“我的妈呀。”男方妈妈不好意思了：“这闺女真实在，成不成的就叫妈。”",
                "name": "百思用户23205905"
            },
            {
                "sid": "30179062",
                "text": "蒋师傅是卖牛肉的，一斤牛肉进价48元。现市场价大甩卖36元一斤。顾客买了两公斤，给了蒋师傅200元假钱，蒋师傅没零钱，于是找邻居换了200元。事后邻居存钱过程中发现钱是假的，被银行没收了，蒋师傅又赔了邻居200，请问蒋师傅一共亏了多少?（这道题目不简单，到底亏了多少？\n万能的姐夫们帮个忙",
                "name": "晚安啊鸭"
            },
            {
                "sid": "28995052",
                "text": "中国礼仪用语：\n初次见面说“久仰”，分别重逢说“久违”。\n征求意见说“指教”，求人原谅说“海涵”。\n求人帮忙说“劳驾”，求人方便说“借光”。\n麻烦别人说“打扰”，向人祝贺说“恭喜”。\n请人看稿称“阅示”，请人改稿说“斧正”。\n求人解答用“请问”，请人指点用“赐教”。\n托人办事用“拜托”，赞人见解用“高见”。\n看望别人用“拜访”，宾客来至用“光临”。\n送客出门说“慢走”，与客道别说“再来”。\n陪伴朋友用“奉陪”，中途先走用“失陪”。\n等候客人用“恭候”，请人勿送叫“留步”。\n欢迎购买叫“光顾”，归还原主叫“奉还”。\n对方来信叫“惠书”，老人年龄叫“高寿”。\n自称礼轻称“薄礼”，不受馈赠说“返璧”。\n被人帮助说“谢谢”，对方家庭叫“府上”。\n自己家庭叫“寒舍”，对方父亲叫“令尊”。\n对方母亲叫“令堂”，问道年龄叫“贵庚”。\n问道姓啥叫“贵姓”，问道职务叫“称谓”。\n问道姓名叫“大名”，对方男孩称“公子”。\n对方女孩称“令嫒”，对方妻子称“夫人”。",
                "name": "地痞痞子"
            }
        ]
    
        //要求以『表格』的形式, 展示这些段子
        //创建虚拟 DOM
        let vDOM = <div className="container-duanzi">
                <h2>段子列表</h2>
                <table border="1">
                    <thead>
                        <tr><td>ID</td><td>作者</td><td>内容</td></tr>  
                    </thead>
                    <tbody>
                    {
                        duanzi.map(item => {
                            return <tr key={item.sid}><td>{item.sid}</td><td>{item.name}</td><td>{item.text}</td></tr>
                        })
                    }
                    </tbody>
                </table>
            </div>;

        //渲染
        ReactDOM.render(vDOM, document.querySelector("#root"));
    </script>
</body>

</html>